import React, { Component } from 'react'
import { TarnsitionContainer } from './style.js'
import "animate.css";
import './styles.css'
import { CSSTransition,TransitionGroup} from 'react-transition-group'
export default class index extends Component {
    state={
        show:false
    }
    render() {
        return (
           <>
            <CSSTransition
            in={this.state.show}
            classNames='fade'
            timeout={2000}
          >
                <ul style={{
                    background:"#ccc"
                }}>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                    <li>9</li>
                    <li>10</li>
                </ul>
            </CSSTransition>

            <button onClick={this.clickHandler}>
                点击
            </button>
           </>
        )
    }
    clickHandler=()=>{
        this.setState((state)=>({
            show:!state.show
        }))
    }
}
